<div class="modal-header">
    <!--<button type="button" class="close" ng-click="closeGroupModal()">&times;</button>-->
    <span class="bebas modal-title" style="color: #657B83;font-size: 19px">
        <i class="fa fa-group"></i> &nbsp;
        {{headerMessage}}
    </span>
</div>

<div class="modal-body" style="background-color: #ededed">
    <div class="margin-top-10">
        <form ng-submit="createNewPublicGroup()">
            <div class="pad-top-5 form-group">
                <b class="font-75em">
                    <span ng-if="!newGroup.id">ENTER NEW</span>
                    <span ng-if="newGroup.id">UPDATE</span> GROUP INFORMATION</b><br>
                <input type="text" class="login_input" placeholder="Group Name" size="35" maxlength="35"
                       ng-model="newGroup.label"/>

                <input type="text" class="login_input" placeholder="Group Description" size="35" maxlength="45"
                       ng-model="newGroup.description"/>
            </div>

            <div class="pad-top-5">
                <b class="font-75em">ADD USERS</b><br>

                <div class="btn-group" uib-dropdown>
                    <button class="btn btn-sm btn-default" uib-dropdown-toggle>
                        <i class="fa fa-fw font-14em"
                           ng-class="{'fa-user dark-gray':newGroup.type =='ACCOUNT',
                            'fa-globe dark_blue':newGroup.type=='REMOTE'}"></i>
                        <span class="caret"></span>
                    </button>

                    <ul uib-dropdown-menu>
                        <li ng-if="newGroup.type == 'REMOTE'">
                            <a href="#" ng-click="newGroup.type='ACCOUNT'; placeHolder=''">
                                <i class="fa fa-fw fa-user dark-gray"></i> Local Account
                            </a>
                        </li>
                        <li ng-if="newGroup.type == 'ACCOUNT'">
                            <a href="#" ng-click="newGroup.type='REMOTE'; getWebPartners()">
                                <i class="fa fa-fw fa-globe dark_blue"></i> Remote Account
                            </a>
                        </li>
                    </ul>
                </div>

                <script type="text/ng-template" id="customTemplate.html">
                    <a class="font-90em">
                        <span ng-bind-html="match.model.firstName + ' ' + match.model.lastName | uibTypeaheadHighlight:query"></span>

                        <div ng-bind-html="match.model.email | uibTypeaheadHighlight:query"
                             style="font-size: 12px; color: #aaa; margin-top: -3px;"></div>
                    </a>
                </script>
                <input class="login_input" type="text" placeHolder="{{placeHolder}}"
                       style="width: 200px; padding: 5px"
                       ng-model="newUserName"
                       typeahead-loading="loadingAddExistingData"
                       uib-typeahead="result for result in filter($viewValue)"
                       typeahead-editable="true" typeahead-template-url="customTemplate.html"
                       typeahead-on-select="userSelectionForGroupAdd($item, $model, $label)"/>

                <div class="btn-group" ng-if="webPartners.length" uib-dropdown>
                    <button type="button" class="btn btn-sm btn-link" uib-dropdown-toggle>
                        {{ newGroup.partner.url || 'Select Registry'}} <span class="caret"></span>
                    </button>

                    <ul uib-dropdown-menu>
                        <li ng-repeat="partner in webPartners">
                            <a href="#" ng-click="selectPartnerForGroupAdd(partner)" class="font-85em"
                               style="line-height: 95%">{{partner.name}}<br>
                                <small class="text-muted">{{partner.url}}</small>
                            </a>
                        </li>
                    </ul>
                </div>

                <button class="btn btn-sm btn-primary" ng-if="newGroup.type == 'REMOTE'"
                        ng-click="userSelectionForGroupAdd(newUserName)">
                    Add
                </button>

                <br><br>

                <div style="background-color: #fff; height: 200px; overflow: auto; width: 440px">
                    <div ng-if="!newGroup.members.length" style="opacity: 0.7;" class="small pad-8">
                        <i>No users added</i>
                    </div>

                    <table class="table table-condensed table-hover" ng-if="newGroup.members.length">
                        <tr ng-repeat="user in newGroup.members | orderBy:'lastName' | orderBy:'firstName'">
                            <td class="no_wrap">
                                <i class="fa fa-fw"
                                   ng-class="{'fa-user dark-gray': user.type=='ACCOUNT',
                                   'fa-globe dark_blue': user.type=='REMOTE'}"></i>
                                &nbsp;

                                <span ng-if="user.type=='ACCOUNT'">{{user.firstName}} {{user.lastName}}
                                <small class="opacity_4 pad-left-8">{{user.email}}</small></span>

                                <span ng-if="user.type=='REMOTE'">{{user.email}}
                                <small class="opacity_4 pad-left-8">{{user.partner.url}}</small></span>

                                <i class="pull-right fa fa-fw fa-times delete_icon"></i>
                            </td>
                        </tr>
                    </table>
                </div>

                <small ng-if="newGroup.members.length"
                       style="margin-top: 15px; color: #777">{{newGroup.members.length}} added
                    <!--<button ng-click="resetSelectedUsers()" class="btn-xs btn-link pull-right"-->
                            <!--style="margin-right: 130px">-->
                        <!--<i class="fa fa-fw fa-times"></i>Clear all-->
                    <!--</button>-->
                </small>
            </div>
        </form>
    </div>
</div>

<div class="modal-footer">
    <button type="submit" ng-disabled="!newGroup.label" class="btn btn-primary"
            ng-click="createOrUpdateGroup()">Save
    </button>
    <button type="reset" ng-click="closeGroupModal()" class="btn btn-default">Cancel</button>
</div>
